<template>
  <div>
        <Header></Header>
        <div class="box">
            <h3>轮播图列表</h3>
            <template>
                <el-table  style="width: 99%"  :data="sliceRows" >
                    <el-table-column prop="goods_id" label="商品编号" width="220"  align="center"> </el-table-column>
                    <el-table-column  label="轮播图图片" align="center">
                        <template slot-scope="scope">
                            <el-image style="width:100px;" :src="scope.row.image_src" ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="show" label="是否上架(0:否,1:是)" width="150"  align="center">  </el-table-column>
                    <el-table-column prop="navigator_url" label="导航地址" width="350"  align="center"> </el-table-column>
                    <el-table-column prop="open_type" label="打开方式" width="100"  align="center"> </el-table-column>
                    <el-table-column align="center" label="管理员操作">
                        <template slot-scope="scope">
                                <el-button size="mini" >
                                    <router-link :to="'/updateSwipers/'+ scope.row._id" >修改</router-link>
                                </el-button>
                                <el-button size="mini" type="danger" @click="deleteData(scope.row._id)">删除</el-button>
                                <el-button size="mini" >
                                    <router-link :to="'/swipers/'+ scope.row._id">其他</router-link>
                                </el-button>
                         </template>
                     </el-table-column>
                </el-table>
            </template>
        </div>
    
        <div class="row" style="text-align: center;">
             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page=" pageData.currentPage"
                :page-sizes="[3]"
                :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total - 0">
             </el-pagination>
         </div>
    </div>
</template>

<script>
import Header from '../common/Header.vue'
import {createNamespacedHelpers} from 'vuex'
const{ mapState,mapActions} = createNamespacedHelpers('swipers')
export default {
    components:{
        Header
    },
    data() {
        return {
            pageData:{
                currentPage:1,
                pageSize:3
            },
            total:0,
            sliceNum : 3,
            slice : 0,
            sliceRows:[],
        }
    },
    created(){
        this.getDataAsync()
    },
    watch:{
        rowsData:{
             handler(){
               this.total=this.rowsData.length
               this.getSliceData()
            },
            deep:true
        },
        "pageData.pageSize"() {
            this.pageData.currentPage = 1;
            this.getDataAsync()
        },
    },
    computed:{
        ...mapState(['rowsData'])
    },
    created() {
         this.getDataAsync();
        setTimeout(() => {
			this.getSliceData()
		}, 500)
        },
    methods: {
        ...mapActions(['getDataAsync','deleteDataAsync']),
        //删除
         async deleteData(_id){
          const data = await this.deleteDataAsync(_id)
        //   console.log('删除',data);
          if (data.code == 200) {
               this.getDataAsync()
          }
        },
         handleSizeChange(val) {
            this.pageData.pageSize=val
            this.sliceNum = val
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageData.currentPage=val
            this.sliceNum = val *this.pageData.pageSize 
            this.slice = (val - 1 ) *this.pageData.pageSize 
            // console.log(`当前页: ${val}`);
             this.getSliceData()
        },
        getSliceData(){
                this.sliceRows = this.rowsData.slice(this.slice,this.sliceNum)
                // console.log(this.sliceRows);
        },
    },

}
</script>

<style scoped lang='scss'>
h3 {
    color: #999;
    margin: 20px 0;
}
.el-select{
    width: 435px;
}
.el-button {

    background-color: rgb(202, 219, 248);
    border-color: rgb(202, 219, 248);
    &:hover{
         background-color: rgb(202, 219, 248);
         border-color: rgb(202, 219, 248);
    }
}
.avatar-uploader, .el-upload {
    border: 2px dashed red;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader ,.el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>